<template>
  <div>
    <el-container>
      <el-aside  width="300px" class="layout-aside">
        <el-menu
            router
            :default-active="$router.currentRoute.path"
            class="el-menu-vertical-demo"

            @open="handleOpen"
            @close="handleClose"
            background-color="#323B3F"
            text-color="#fff"
            active-text-color="#fff"
            unique-opened>
          <el-menu-item index="/sys-admin/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>考试管理</span>
            </template>
            <el-menu-item index="/sys-admin/temp/exam/addNew">
              <i class="el-icon-circle-plus"></i>
              <span slot="title">添加考试</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/exam/list">
              <i class="el-icon-s-operation"></i>
              <span slot="title">考试列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>考试信息管理</span>
            </template>
            <el-menu-item index="/sys-admin/temp/examIntroduction/addNew">
              <i class="el-icon-circle-plus"></i>
              <span slot="title">添加信息介绍</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/examIntroduction/list">
              <i class="el-icon-s-operation"></i>
              <span slot="title">考试信息列表</span>
            </el-menu-item>

          </el-submenu>
          <el-submenu index="4" >
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>考生管理</span>
            </template>
            <el-menu-item index="/sys-admin/temp/examUser/addNew">
              <i class="el-icon-circle-plus"></i>
              <span slot="title">添加考生</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/examUser/list">
              <i class="el-icon-s-operation"></i>
              <span slot="title">考生列表</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="5" >
            <template slot="title">
              <i class="el-icon-s-ticket"></i>
              <span>反馈信息管理</span>
            </template>

            <el-menu-item index="/sys-admin/temp/feedback/list">
              <i class="el-icon-s-operation"></i>
              <span slot="title">反馈信息列表</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6" >
            <template slot="title">
              <i class="el-icon-platform-eleme"></i>
              <span>考试公告管理</span>
            </template>
            <el-menu-item index="/sys-admin/temp/info/addNew">
              <i class="el-icon-circle-plus"></i>
              <span slot="title">添加考试公告</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/info/list">
              <i class="el-icon-s-operation"></i>
              <span slot="title">考试公告列表</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-s-check"></i>
              <span>用户信息管理</span>
            </template>
            <el-menu-item index="/sys-admin/temp/user/addNew">
              <i class="el-icon-circle-plus"></i>
              <span slot="title">添加用户信息</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/user/list">
              <i class="el-icon-s-operation"></i>
              <span slot="title">用户信息列表</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
      <el-container class="layout-body">
        <el-header class="layout-header"><h1>考试报名管理平台</h1></el-header>
        <el-main class="layout-main">
          <!-- 根据路由，由其它视图组件来显示 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body{

}
.layout-header {
  background: #F5F5F5;
  color: #323B3F;

}

.layout-header h1 {
  line-height: 60px;
}

.layout-body {
  position: absolute;left: 299px ; right: 0px;top: 0px;bottom: 0px;
}

.layout-aside {
  background: #323B3F;
  line-height: 260px;
  position: absolute;top: 0px;bottom: 0px;
}

.layout-aside i{
  color: #ffffff !important;
}

.layout-main {
  background-color: #ffffff;

}
/*鼠标点击时,导航栏颜色变化*/
.el-menu-item.is-active{
  background-color: #282F32;
}

</style>
<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

  },

}
</script>
